<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="per.css">
    <style type="text/css">
        *{margin:0;padding: 0}
        .updata-list{position:relative;padding:0.75rem 0.86rem 0.65rem;line-height:1;}
        .updata-title{position:relative;display:block;width:6.85rem;font-size:0.7rem;color:#666;margin-bottom:0.2rem;}
        .updataImg{display:inline-block;position:relative;width:4rem;border:1px solid #ccc;margin-right:1rem;margin-bottom: 1rem;padding: 0.5rem}
        .joinImg{width:100%}
        .file-Img{opacity:0;position:absolute;top:0;left:0;bottom:0;right:0;z-index:9;background:red;width:100%;}
        .input-close{position:absolute;top:-11px;left:-13px;width:1.5rem;z-index: 12}
        .submit{position: fixed;bottom: 0;background: #04be02;text-align: center;display: block;width: 100%;color: #fff;padding: 1rem 0}
        .Person{
            background: #fff;margin-top: 70px;
        }
    </style>
</head>
<body>
    <div class="headP">
        <div class="headLeft">
            <a href="">
                <img src="close.png" alt="头像">
            </a>
        </div>
        <div class="headTextP">
            <a href="swiper.html">查看效果</a>
        </div>
        <div class="headMenu" id="headMenu">
            <i class="iconfont icon-xitongcaidan" style="font-weight: bold;font-size: 1.4rem"></i>
        </div>
    </div>
    <div class="Person">
        <div class="updata-list" id="items">
            <div class="updataImg" data-index=0 id="updataImg">
                <img class="input-close" src="close.png">
                <input type="file" name="" class="file-Img" id="file-input" accept="image/*">
                <img class="joinImg" id="file-img" src="add.png" data-filename onerror="this.src='add.png';"/>
            </div>
        </div>
        <div class="submit">确认上传</div>
    </div>
    <script src="sortable.min.js?v=0.0"></script>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
        // 拖拽插件
        var el = document.getElementById('items');
        new Sortable(el);
        new Sortable(el, {   
            handle: ".updataImg", // 拖拽区域
            sort: true,
            animation: 150,
            delay: 150,

            scroll: true, 
            scrollSensitivity: 30,
            scrollSpeed: 10, 
            
            onStart: function (evt) { // 拖拽开始
                var itemEl = evt.item;// 当前拖拽的html元素
            },
         
            onEnd: function (evt) { // 拖拽结束
                var itemEl = evt.item;
            },
        });

        $(document).on("click","#file-input",function(e){
            e.stopPropagation();
            if($(this).val() != ""){
                return false;
            }
        })
        //添加空白框
        $(document).on("change","#file-input",function(e){
            e.stopPropagation();
            console.log(e);
            for (var i = 1; i <= $(".updataImg").length; i++) {
                var html = "";
                html += "<div class='updataImg' data-index="+i+">";
                html += "<img class='input-close' src='close.png'>";
                html += "<input type='file' name='' class='file-Img' id='file-input' accept='image/*'>";
                html += "<img class='joinImg' id='file-img' src='add.png' data-filename/>";
                html += "</div>";
            }
            
            $(html).appendTo(".updata-list")
             
        })
        // 删除照片
        $(document).on("click",".input-close",function(e){
            console.log($(this))
            if ($(".updataImg").length == 1) {
                return false
            }else{
                $(this).parent().remove()
            }
            
        })
    </script>

</body>
</html>